// 图片的慢加载

import eventBus from "@/eventBus.js";
import { debounce } from "@/utils";
import defaultGif from "@/assets/default.gif";
// 改用了代理, 不再拼接url了

let imgs = [];

// 调用该函数, 就可以设置合适的图片[页面中能直接看到的区域中的图片为合适的图片]
function setImages() {
  for (const img of imgs) {
    // 处理图片
    setImage(img);
  }
}

function setImage(img) {
  img.dom.src = defaultGif; // 让所有图片先显示为defaultGif
  // 处理图片
  // 1. 图片是否在视口范围内
  const H = document.documentElement.clientHeight; // 视口高度
  const rect = img.dom.getBoundingClientRect();
  const height = rect.height || 100; // 最小高度为100
  if (rect.top >= -height && rect.top <= H) {
    // 在视口范围
    const tempImg = new Image(); // 创建图像对象
    tempImg.onload = function () {
      // 当真实图片加载完成之后
      img.dom.src = img.src;
    };

    // 上面这段也可以直接写img.dom.src = img.src;
    // 不过这样最开始视口内的那些图片就不会是从默认图片开始加载的, 而是直接加载真实图片
    // console.log("加载真实图片", img.dom)
    tempImg.src = img.src;
    imgs = imgs.filter((i) => i !== img); // 取消已经加载的图片
  }
}

function handleScroll() {
  setImages();
}

// 在事件总线中监听事件mainScroll, 如果没有组件向事件总线中抛出mainScroll事件则不会执行事件处理函数
eventBus.$on("mainScroll", debounce(handleScroll, 100));

export default {
  inserted(el, bindings) {
    // el: 被绑定元素对应的真实DOM
    const img = {
      dom: el,
      src: bindings.value, // 通过bindings.value获取指令的值
    };
    imgs.push(img);
    // 立即处理一次
    setImage(img);
  },
  // 删除, unbind在元素消失的时候执行
  unbind(el) {
    imgs = imgs.filter((img) => img.dom !== el);
  },
};
